<template>
  <el-dialog v-model="visible" :title="'提现申请'" top="0vh" :close-on-click-modal="false" @close="close" @open="open">
    <div class="review-content" v-loading="loading">
      <!-- 申请信息概览 -->
      <el-card shadow="always" class="applicant-overview">
        <template #header>
          <el-space style="width: 100%">
            <el-icon><User /></el-icon>
            <span>提现信息概览</span>
          </el-space>
        </template>
        <el-row justify="space-around" :gutter="20">
          <el-col :span="12">
            <el-space>
              <el-avatar :size="50" :src="detail.attendantAvatar" />
              <div>
                <div class="applicant-name">{{ detail.attendantName || '-' }}</div>
              </div>
            </el-space>
          </el-col>
          <el-col :span="12">
            <el-space direction="vertical" alignment="flex-start">
              <el-space direction="horizontal">
                <el-icon><Calendar /></el-icon>
                <el-text type="primary">{{ detail.createTime || '-' }}</el-text>
              </el-space>
              <el-space direction="horizontal">
                <el-icon><Document /></el-icon>
                <el-tag :type="detail.status === 0 ? 'warning' : detail.status === 1 ? 'success' : detail.status === 2 ? 'danger' : 'info'">
                  {{ detail.status === 0 ? '提现中' : detail.status === 1 ? '提现成功' : detail.status === 2 ? '提现失败' : '未知' }}
                </el-tag>
              </el-space>
            </el-space>
          </el-col>
        </el-row>
      </el-card>

      <!-- 审核操作 -->
      <el-card shadow="always" class="audit-operation">
        <template #header>
          <el-space>
            <el-text type="danger">*</el-text>
            <el-icon><Check /></el-icon>
            <div>提现操作</div>
          </el-space>
        </template>
        <el-form ref="formRef" :model="formData" :rules="formRules">
          <el-form-item prop="status" required>
            <el-radio-group v-model="formData.status" style="width: 100%" size="large">
              <el-radio :value="'1'" style="min-height: 60px; width: 100%; margin: 0" :border="true">
                <template #default>
                  <el-space direction="horizontal" alignment="center">
                    <el-icon style="font-size: 20px"><Check /></el-icon>
                    <el-space direction="vertical" :size="0" alignment="flex-start">
                      <el-text type="success">同意提现</el-text>
                      <el-text type="info">同意提现，提现金额将发放到提现人的微信账号中</el-text>
                    </el-space>
                  </el-space>
                </template>
              </el-radio>
              <el-radio :value="'2'" style="min-height: 60px; width: 100%; margin: 0; margin-top: 10px" :border="true">
                <template #default>
                  <el-space direction="horizontal" alignment="center">
                    <el-icon style="font-size: 20px"><Close /></el-icon>
                    <el-space direction="vertical" :size="0" alignment="flex-start">
                      <el-text type="danger">拒绝提现</el-text>
                      <el-text type="info">拒绝提现，提现金额将退回提现人的账户余额中</el-text>
                    </el-space>
                  </el-space>
                </template>
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 拒绝原因 -->
      <el-card shadow="always" class="audit-opinion">
        <template #header>
          <el-space>
            <el-text type="danger">*</el-text>
            <el-icon><Edit /></el-icon>
            <div>结果说明</div>
          </el-space>
        </template>
        <el-form ref="formRef" :model="formData" :rules="formRules">
          <el-form-item
            prop="result"
            required
          >
            <el-input
              v-model="formData.result"
              :show-word-limit="true"
              resize="none"
              :autosize="{ minRows: 2, maxRows: 4 }"
              maxlength="400"
              type="textarea"
              placeholder="请输入结果说明"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-alert :closable="false" style="margin-top: 10px">
            <template #default>
              <el-space direction="vertical">
                <el-space>
                  <el-icon color="#ffc345"><Opportunity /></el-icon>
                  <span>提示：请提供具体的结果说明，以便提现人了解结果说明</span>
                </el-space>
              </el-space>
            </template>
          </el-alert>
        </template>
      </el-card>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">关闭</el-button>
        <el-button type="primary" @click="handleSubmit">确认提现</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getWithdraw, checkWithdraw } from '@/api/withdraw/withdraw'

const { proxy } = getCurrentInstance();

const props = defineProps({
  reviewDialogVisible: { type: Boolean, default: false },
  withdrawId: { type: Number, default: null }
})

const emit = defineEmits(['handleClose', 'success'])

const visible = ref(false)
const loading = ref(false)
const detail = ref({})

const formRef = ref()
const formData = ref({
  status: '',
  result: ''
})

watch(
  () => props.reviewDialogVisible,
  (val) => {
    if (val) {
      visible.value = val;
    }
  }
)

const formRules = computed(() => ({
  status: [
    { required: true, message: '请选择审核状态', trigger: 'change' }
  ],
  result: [
    { 
      required: true, 
      message: '请输入结果说明', 
      trigger: 'blur' 
    },
  ]
}))

// 监听状态变化，当从拒绝切换到同意时，清空拒绝原因
watch(
  () => formData.value.status,
  (newVal, oldVal) => {
    if (oldVal === '2' && newVal !== '2') {
      formData.value.result = ''
      formRef.value && formRef.value.clearValidate && formRef.value.clearValidate('result')
    }
  }
)

const open = () => {
  fetchDetail();
}

const close = () => {
  visible.value = false;
  resetForm();
  emit('handleClose');
}

const fetchDetail = () => {
  loading.value = true
  getWithdraw(props.withdrawId).then(res => {
    detail.value = res.data || {}
  }).finally(() => {
    loading.value = false
  })
}

const resetForm = () => {
  formData.value = { status: '', result: '' }
  formRef.value && formRef.value.clearValidate && formRef.value.clearValidate()
}

const handleSubmit = () => {
  if (!formRef.value) {
    return;
  }
  
  formRef.value.validate((valid) => {
    if (valid) {
      const confirmMessage = formData.value.status === '1' 
      ? '确认同意提现？提现金额将发放到提现人的微信账号中。' 
      : '确认拒绝提现？提现金额将退回提现人的账户余额中。'
      
      proxy.$modal.confirm(confirmMessage).then(() => {
      checkWithdraw({ id: props.withdrawId, status: Number(formData.value.status), result: formData.value.result.trim() }).then(res => {
          visible.value = false;
          emit('success');
        })
      }).catch(() => {
        return;
      })
    }
  })
}
</script>

<style scoped lang="scss">
.review-content {
  padding: 0;

  .applicant-overview {
    margin-bottom: 16px;

    .applicant-name {
      font-size: 16px;
      font-weight: 600;
      color: #1f2937;
      margin-bottom: 4px;
    }
  }

  .audit-operation { margin-bottom: 16px; }
  .audit-opinion { margin-bottom: 16px; }
}

/* 选中项配色 */
:deep(.el-radio.is-bordered.is-checked.el-radio--large:nth-child(1)) {
  background-color: #f0f9f6;
  border-color: #00a870;
}

:deep(.el-radio.is-bordered.is-checked.el-radio--large:nth-child(2)) {
  border-color: #f56c6c;
  background-color: #fff0f0;
}

@media (max-width: 768px) {
  .review-content {
    .applicant-overview {
      .el-row { flex-direction: column; gap: 16px; }
    }
  }
}
</style>


